<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css_spriter</title>
	<link rel="stylesheet" type="text/css" href="css/css_reset.css">
	<style type="text/css">
		.sprite{
			float: left;
			/*border: 1px solid #f4f4f4;*/
		}
		.sprite ul{
			width: 243px;
			overflow: hidden;
			
		}
		.sprite ul li{
			float: left;
			width: 79px;
			height: 79px;
			border: 1px solid #f4f4f4;
			border-left-color: transparent;
			border-top-color: transparent;
		}
		.sprite ul li a{
			display: block;
			text-align: center;
			font-size: 12px;
			color: #888;
			
		}
		.sprite ul li a:hover{
			color: #eee;
		}
		.sprite ul li a span{
			margin-top: 12px;
			margin-left: 10px;
			display: inline-block;
			width: 43px;
			height: 38px;	
			background: url('images/006.png') no-repeat 0 0;
			background-size: 33px 825px;
		}
		.sprite ul li a span.p1{
			background-position: 0 0;
		}
		.sprite ul li a span.p2{
			background-position: 0 -60px;
		}
		.sprite ul li a span.p3{
			background-position: 0 -120px;
		}
		.sprite ul li a span.p4{
			background-position: 0 -180px;
		}
		.sprite ul li a span.p5{
			background-position: 0 -242px;
		}
		.sprite ul li a span.p6{
			background-position: 0 -301px;
		}
		.sprite ul li a span.p7{
			background-position: 0 -360px;
		}
		.sprite ul li a span.p8{
			background-position: 0 -420px;
		}
		.sprite ul li a span.p9{
			background-position: 0 -483px;
		}
	</style>
</head>
<body>
	<div class="sprite">
		<ul>
			<li>
				<a href="#">
					<span class="p1"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p2"></span>
					<p>社保</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p3"></span>
					<p>火车票</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p4"></span>
					<p>旅行</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p5"></span>
					<p>账单</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p6"></span>
					<p>看电影</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p7"></span>
					<p>加油</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p8"></span>
					<p>金元宝</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="p9"></span>
					<p>微笑</p>
				</a>
			</li>
		</ul>
	</div>
	
</body>
</html>